<template>
  <div class="match_list table-theme">
    <head-title title="营销--红包领取列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
						:option-list="sortList"
						:value="asc"
						placeholder="排序"
						type="asc"
						@value="setSelectValue"
					>
					</select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table :data="list" stripe>
        <el-table-column
          label="序号"
          align="center"
          prop="red_packet_id"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          label="金额"
          align="center"
          prop="money"
        ></el-table-column>
        <el-table-column
          label="祝福语"
          align="center"
          prop="greeting"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="30"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import GreetLists from "@/components/layer-dialog/greet_list.vue"
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
export default {
  data() {
    return {
      optionList: [
        {
          value: 0,
          label: "用户ID",
        },
        {
          value: 1,
          label: "红包ID",
        }
      ],
      page: 1,
      total: 0,
      list: [],
      classSelect: 1,
      selectContent: "",
      sortList: [
        {
          value: 1,
          label: "升序",
        },
        {
          value: 2,
          label: "降序",
        },
      ],
      asc:2,
      order_by:'add_time',
      match_id:""
    };
  },
  components: {
    GreetLists,
    ImgPopover,
    SelectView
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.type = 0;
      this.classSelect = 1;
      this.selectContent = "";
	  this.asc = 2;
      this.init(1);
    },
    // 获取搜索框
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 20,
        order_by:this.order_by,
        asc:this.asc
      };
      if (this.classSelect == 0) {
        data.user_id = this.selectContent;
      } else if (this.classSelect == 1) {
        data.red_packet_id = this.selectContent;
      }
      this.$http(this.$ApiList.GreetLists,data).then((res) => {
        this.total = res.counts;
        this.list = res.datas;
      });
    },
    setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'asc':
						this.asc = value
						break;
				
					default:
						break;
				}
				this.init()
			}
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>

</style>